import { defineComponent, toRefs } from 'vue'
import * as elIcons from '@element-plus/icons-vue'
import { ElSubMenu, ElIcon, ElMenuItem } from 'element-plus'
import 'element-plus/dist/index.css'
import AsideMenu from '@/jsx/asideMenu.jsx'

const Icons = elIcons

export default defineComponent({
    props: {
        menuItems: {
            type: Array
        }
    },
    setup(props) {
        const { menuItems } = toRefs(props)

        return () => (
            <>
                {
                    menuItems.value.map(item => {
                        const levelOneIcon = Icons[item.icon];
                        return (
                            <>
                                {item.children ?
                                    <ElSubMenu index={item.route_address || item._id}
                                        v-slots={{
                                            title: () => {
                                                const IconComponent = Icons[item.icon];
                                                return (
                                                    <>
                                                        <ElIcon>
                                                            <IconComponent />
                                                        </ElIcon>
                                                        <span>{item.name}</span>
                                                    </>
                                                )
                                            }
                                        }}
                                    >
                                        <AsideMenu menuItems={item.children}></AsideMenu>
                                    </ElSubMenu> :
                                    <ElMenuItem index={item.route_address || item._id}>
                                        {
                                            levelOneIcon ?
                                                <>
                                                    <ElIcon><levelOneIcon /></ElIcon>
                                                    <span>{item.name}</span>
                                                </> :
                                                <span>{item.name}</span>
                                        }
                                    </ElMenuItem>
                                }
                            </>
                        )
                    })
                }
            </>
        )
    }
})